<!DOCTYPE html>

<html>
    <head>
        <title>全屏轮播</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{margin:0;padding: 0;list-style-type: none;text-decoration: none;}
            body{width:0;height: 0;}
            div{width:0;height: 0;position: relative;overflow: hidden;}
            ul{width:0;height:0;position: absolute;left:0;top:0;}
            ul li{width:0;height:0;float:left;}
            img{width:100%;height:auto;}
            ol{width:1000px;height:50px;background: #ccc;text-align: center;position: absolute;bottom:20px;left:50%;margin-left: -500px;border-radius: 50px 50px;}
            ol li{display: inline-block;height: 50px;width:50px;background: #ff0;margin: 0 5px;line-height: 50px;border-radius: 50%;}
            .select{background: #6633ff;color:#fff;}
            a{width:80px;height: 100px;line-height: 100px;text-align: center;background:#000;color:#fff;font-size: 18px;font-weight: 900;}
            .left{position:absolute;left:0;top:50%;margin-top: -50px;} .right{position:absolute;right:0;top:50%;margin-top: -50px;}
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li><img src="img/1.jpg" alt=""/></li>
                <li><img src="img/2.jpg" alt=""/></li>
                <li><img src="img/3.jpg" alt=""/></li>
                <li><img src="img/4.jpg" alt=""/></li>
                <li><img src="img/5.jpg" alt=""/></li>
                <li><img src="img/6.jpg" alt=""/></li>
                <li><img src="img/7.jpg" alt=""/></li>
                <li><img src="img/8.jpg" alt=""/></li>
            </ul>
            <ol>
                <li class="select">1</li>
            </ol>
            <a href="javascript:;" class="left">left</a>
            <a href="javascript:;" class="right">right</a>
        </div>
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var win_w = $(window).width();
            var win_h = $(window).height();
            var index = 0;
            var tick;
            var ul=$("ul");
            var ol=$("ol");
            var left=$(".left");
            var right=$(".right");
            var body=$("body");
            var div=$("div");
            ul.append($("ul li").first().clone());
            var li_n = $("ul li").length;
            $(window).resize(function () {
                win_w = $(window).width();
                win_h = $(window).height();
                autofirst();
            });
            autofirst();
            for (var i = 2; i <= li_n - 1; i++) {
                ol.append("<li>" + i + "</li>");
            }
            $("ol li").click(function () {
                index = $(this).index();
                autosecond();
            });
            left.click(function () {
                index--;
                autothird();
            });
            right.click(function () {
                index++;
              autothird();
            });
            function autofirst() {
                body.css({"width": win_w, "height": win_h});
                div.css({"width": win_w, "height": win_h});
                ul.css({"width": win_w * li_n, "height": win_h});
                $("ul li").css({"width": win_w, "height": win_h});
            }
            function autosecond() {
                ul.stop().animate({"left": -win_w * index}, 1000);
                $("ol li").eq(index).addClass("select").siblings().removeClass("select");
            }
            tick = setInterval(function () {
                right.click();
            }, 1000);
          function autothird(){
              if (index < 0) {
                    ul.css({"left": -win_w * (li_n - 1)});
                    index = li_n - 2;
                    autosecond();
                } else
               if (index === li_n - 1) {
                    $("ol li").eq(0).addClass("select").siblings().removeClass("select");
                } else if (index > li_n - 1) {
                    ul.css({"left": 0});
                    index = 1;
                }
                autosecond();
          }  
        </script>
    </body>
</html>
